<!DOCTYPE html>
<html xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{common/layout}">

<head>
	<meta charset="UTF-8">
	<title>合作节点</title>
	<style>
	 
	</style>
</head>

<body>
	<div layout:fragment="fragment_body">
		<div class="toolbar">
			<div style="margin-right: 12px; width: 220px;">
				<el-input placeholder="请输入节点"></el-input>
			</div>
			<div style="flex: 1 1 0%;">
				<el-button-group>
					<el-button @click="changeStatus(null)" :type="listStatus == null ?'primary':''"
						icon="Document">全部</el-button>
					<el-button @click="changeStatus(0)" :type="listStatus == 0 ?'primary':''"
						icon="CircleCheck">可用</el-button>
					<el-button @click="changeStatus(1)" :type="listStatus == 1 ?'primary':''"
						icon="CircleClose">不可用</el-button>
				</el-button-group>
			</div>
			<el-button type="primary" @click="openForm" icon="DocumentAdd">新增节点</el-button>
		</div>
		<div v-loading="listLoading">
			<el-empty description="暂无节点" v-if="list == null || list.length == 0"></el-empty>
			<el-table :data="list" v-if="list !== null && list.length > 0" border style="width: 100%;margin-top: 12px;">
				<el-table-column prop="srcNode.nodeCode" label="来源节点" rowspan="2"></el-table-column>
				<el-table-column prop="srcNode.nodeGateway" label="来源节点"></el-table-column>
				<el-table-column prop="dstNode.nodeCode" label="合作节点"></el-table-column>
				<el-table-column prop="dstNode.nodeGateway" label="合作节点"></el-table-column>
				<el-table-column prop="routeStatue" label="状态" width="100">
					<template #default="scope">
						<el-tag size="small" type="success" v-if="scope.row.routeStatus == 0">可用</el-tag>
						<el-tag size="small" type="danger" v-if="scope.row.routeStatus == 1">不可用</el-tag>
						<el-link :underline="false">
							<el-icon :size="20" color="green" @click="restatus(scope.row.routeId)">
								<Refresh></Refresh>
							</el-icon>
						</el-link>
					</template>
				</el-table-column>
				<el-table-column prop="nodeCreate" label="绑定时间" width="150"></el-table-column>
				<el-table-column prop="nodeCreate" label="操作" width="150">
					<template #default="scope">
						<el-button type="text" size="small" @click="unNode(scope.row.routeId)">解绑</el-button>
						<el-button type="text" size="small" @click="delNode(scope.row.routeId)">清除</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>
		<!--弹框-->
		<el-dialog title="节点合作设置" v-model="routeForm.visible" width="40%">
			<el-form :model="routeForm" :rules="routeFormRules" ref="routeForm" label-width="100px">
				<el-row :gutter="10">
					<el-col :span="12">
						<h4>来源节点</h4>
						<el-form-item label="合作节点" prop="srcNode">
							<el-select v-model="routeForm.srcNode" placeholder="来源节点" @change="changeSrcNode">
								<el-option
							      v-for="item in nodes"
							      :key="item.nodeId"
							      :label="item.nodeCode"
							      :value="item.nodeId"
							    ></el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="10">
					<el-col :span="12">
						<h4>合作节点</h4>
						<el-form-item label="合作节点ID" prop="dstNodeSearch">
							<el-input v-model="routeForm.dstNodeSearch" ></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="searchNode()">搜一搜</el-button>
						</el-form-item>
						<el-form-item label="搜索结果" v-show="routeForm.dstNode != null && routeForm.dstNode !=''">
							<el-text type="success">{{routeResult.dstNodeTitle}}（{{routeResult.dstNodeCode}}）</el-text>
						</el-form-item>
					</el-col> 
				</el-row>
				<el-row :gutter="10">
					<el-col :span="24" v-show="routeResult.dstNodeId != null && routeResult.dstNodeId !=''">
						<h4>节点互认脚本(如果已经绑定则忽略以下脚本要求)</h4>
						<h5>#{{routeResult.srcNodeCode}} 绑定{{routeResult.dstNodeCode}} </h5>
						<pre><code>
							docker exec -it ${USER}-kuscia-master 
							sh scripts/deploy/create_cluster_domain_route.sh 
							{{routeResult.srcNodeCode}} 
							{{routeResult.dstNodeCode}} 
							{{routeResult.dstNodeGateway}}
						</code></pre>
						<h5>#{{routeResult.dstNodeCode}} 绑定{{routeResult.srcNodeCode}} </h5>
						<pre><code>
							docker exec -it ${USER}-kuscia-master 
							sh scripts/deploy/create_cluster_domain_route.sh 
							{{routeResult.dstNodeCode}} 
							{{routeResult.srcNodeCode}} 
							{{routeResult.srcNodeGateway}}
						</code></pre>
					</el-col> 
				</el-row>
			</el-form>
			<template #footer>
				<el-button @click="closeForm">取 消</el-button>
				<el-button type="primary" @click="saveForm('0')" :disabled="routeForm.dstNode == null || routeForm.dstNode ==''">绑定关系</el-button>
				<el-button type="success" @click="saveForm('1')" :disabled="routeForm.dstNode == null || routeForm.dstNode ==''">实时绑定</el-button>
			</template>
		</el-dialog>
	</div>
</body>
<script type="text/javascript" layout:fragment="fragment_script">
	const _data = {
		list: [],
		nodes: [],
		listStatus: null,
		listLoading: false,
		routeForm: {
			visible: false,
			srcNode: '',
			dstNode: '',
			dstNodeSearch: '',
		},
		routeFormRules: {
			srcNode: [
				{required: true, message: '请选择节点', trigger: 'blur'}
			],
			dstNode: [
				{required: true, message: '请选择合作节点', trigger: 'blur'},
				{validator: function (rule, value, callback) {
			      if (that.routeForm.srcNode === that.routeForm.dstNode) {
			        callback(new Error("不能选择同一个节点"));
			      } else {
			        callback();
			      }
			    }, trigger: 'blur'}
			],
			dstNodeSearch: [
				{required: true, message: '请输入搜索节点ID', trigger: 'blur'}
			],
		},
		routeResult: {
			dstNodeId: '',
			dstNodeTitle: '',
			dstNodeCode: '',
			dstNodeGateway: '',
			srcNodeCode: '',
			srcNodeGateway: ''
		},
	}
	const _method = {
		changeStatus(val) {
			this.listStatus = val
		},
		openForm(row) {
			this.routeForm.visible = true
			/*if(row){
				this.routeForm = row
				this.routeForm.visible = true
			}*/
		},
		unNode(routeId){
			that.$messageBox.confirm('该操作删除数据库绑定关系与底层绑定，是否继续?')
		    .then(() => {
		      getRequst('/nodeRoute/unbind?routeId=' + routeId).then(function (resp) {
				if (resp.status == 0) {
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
				})
		    })
		    .catch(() => {
		      // catch error
		    })
		},
		delNode(routeId){
			that.$messageBox.confirm('该操作直接删除数据库绑定关系，是否继续?')
		    .then(() => {
		      getRequst('/nodeRoute/delNode?routeId=' + routeId).then(function (resp) {
				if (resp.status == 0) {
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
				})
		    })
		    .catch(() => {
		      // catch error
		    })
		},
		closeForm() {
			this.$refs["routeForm"].resetFields();
			this.routeForm.visible = false
			this.routeForm.dstNode = null
			this.routeResult.dstNodeId = null
			this.routeResult.dstNodeTitle = null
			this.routeResult.dstNodeCode = null
			this.routeResult.dstNodeGateway = null
			this.routeResult.srcNodeCode = null
			this.routeResult.srcNodeGateway = null
		},
		saveForm(bindType) {
			let that = this
			that.$refs["routeForm"].validate((valid) => {
				if (valid) {
					that.routeForm.bindType = bindType
					let loading = that.$loading()
					postRequst('/nodeRoute/bind', that.routeForm, true).then(function (resp) {
						loading.close()
						if (resp.status == 0) {
							that.loadList()
							that.routeForm.visible = false
							that.$message({message: resp.msg, type: "success"});
						} else {
							that.$message({message: resp.msg, type: "error"});
						}
					})
				}
			});
		},
		checkNottls(rule, value, callback){
			
		},
		loadList() {
			let that = this
			that.listLoading = true
			getRequst('/nodeRoute/list').then(function (resp) {
				that.list = resp.data
				that.listLoading = false
			})
		},
		loadNodes() {
			let that = this
			getRequst('/node/list').then(function (resp) {
				that.nodes = resp.data
			})
		},
		restatus(routeId) {
			let that = this
			let loading = that.$loading()
			getRequst('/nodeRoute/restatus?routeId=' + routeId).then(function (resp) {
				loading.close()
				if (resp.status == 0) {
					that.loadList()
					that.$message({message: resp.msg, type: "success"});
				} else {
					that.$message({message: resp.msg, type: "error"});
				}
			})
		},
		changeSrcNode(nodeId){
			
		},
		searchNode() {
			let that = this
			that.$refs["routeForm"].validateField('dstNodeSearch', (valid) => {
				if(valid){
					let pp = {
						'srcNode': that.routeForm.srcNode,
						'dstNode': that.routeForm.dstNodeSearch
					}
					postRequst('/nodeRoute/search', pp, true).then(function (resp) {
						if(resp.status == 0){
							that.routeForm.dstNode = resp.data.dstNodeId
							that.routeResult = resp.data
						}else{
							that.$message({message: resp.msg, type: "info"});
							that.routeForm.dstNode = null
							that.routeResult.dstNodeId = null
							that.routeResult.dstNodeTitle = null
							that.routeResult.dstNodeCode = null
							that.routeResult.dstNodeGateway = null
							that.routeResult.srcNodeCode = null
							that.routeResult.srcNodeGateway = null
						}
					})
				}
			})
		},
	}
	function _created() {
		this.loadList()
		this.loadNodes()
	}
	const _watch = {
		
	}
</script>

</html>